<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload = function(){
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				
				cxt.globalCompositeOperation = "source-over";
				
				cxt.fillStyle = "black";
				cxt.fillRect(0,0,280,300);	
				
				var startX = 140;
				var startY = 120;
				var pWidth = 120;
				var pHeigth = 80;
				var fWidth = 120;
				var fheight = 50;
				
				ParamEllipse(cxt, startX, startY, pWidth, pHeigth);
				FillRect(cxt, startX - fWidth / 2, startY - pHeigth - (fheight / 2), fWidth, fheight, true);
				FillRect(cxt, startX - fWidth / 2, startY + pHeigth - (fheight / 2), fWidth, fheight, false);
				var lLen = fheight;
				var lInterval = 8;
				for (var i = 0; i < (fWidth / 8) + 1; i++) {
					SetLine(cxt, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2, startX - fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2 + lLen);
				}
				function ParamEllipse(cxt, x, y, a, b) {
				var step = (a > b) ? 1 / a : 1 / b;
				cxt.fillStyle = "#ff0000";
				cxt.beginPath();
				cxt.moveTo(x + a, y);
				for (var i = 0; i < 2 * Math.PI; i += step) {
					cxt.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
				}
				cxt.closePath();
				cxt.stroke();
				cxt.fill();
				cxt.closePath();
			};
			function FillRect(cxt, x, y, w, h, flag) {
				var grd = cxt.createLinearGradient(x+w/2, y, x + w/2, y + h);
				if (flag) {
					grd.addColorStop(0, "yellow");
					grd.addColorStop(1, "red");
				} else {
					grd.addColorStop(0, "red");
					grd.addColorStop(1, "yellow");
				}
				cxt.fillStyle = grd;
				cxt.fillRect(x, y, w, h);
				}
			function SetLine(cxt, x, y, x1, y1) {
				cxt.beginPath();
				cxt.strokeStyle = "yellow";
				cxt.moveTo(x,y);
				cxt.lineTo(x1,y1);
				cxt.stroke();
				cxt.closePath();
			}
			
			function $$(id){
				return document.getElementById(id);
			}
			
		}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="500" height="560"  style="border:1px dashed gray;"></canvas>
	</body>
</html>